<template>
  <div class="home  d-flex flex-column my-container">

    <div class="title-container" v-if="permersion.search">
      <div class="search-content">
        <el-form :model="searchModel" :inline="true">
          <el-form-item>
            <el-input v-model="searchModel.deviceName" placeholder="请输入设备名称" prefix-icon="el-icon-search"/>
          </el-form-item>
          <el-form-item>
            <el-input v-model="searchModel.deviceCode" placeholder="请输入设备编码" prefix-icon="el-icon-search"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="col d-flex flex-column shadow p-3 rounded-lg">
      <div class="" v-if="permersion.search">

        <el-form :model="searchModel" :inline="true">
          <el-form-item>
            <el-button type="success" icon="el-icon-refresh" @click="refresh">刷新</el-button>

          </el-form-item>
        </el-form>
      </div>
      <div class="col d-flex over-auto">
        <common-table v-loading="tableLoading" show-index show-check-box :columns="columns" :list="list">
        </common-table>
      </div>
      <pagination class="pagination" :total="count" :page.sync="page.pageIndex" :limit.sync="page.pageSize"
                  @pagination="pagination"/>
    </div>
    <template v-if="dialogVisible">
      <ConfigDialog :devCode="devCode" :dialogVis="dialogVisible" @update:dialogVis="closeDialog"></ConfigDialog>
    </template>
  </div>
</template>

<script>
  import { queryDevicePage } from "@/api/settingManagement/devicesSetting"
  import CommonTable from "@/components/newSystem/newTable/CommonTable.vue"
  import ConfigDialog from "./dialog/configDialog.vue"

  export default {
    components: {
      CommonTable,
      ConfigDialog
    },
    data() {
      return {
        count: 0,
        permersion: {
          add: true,
          del: true,
          update: true,
          search: true
        },
        searchModel: {
          deviceName: "",
          deviceCode: ""
        },
        columns: [
          {
            title: "设备名称",
            prop: "deviceName",
            align: "center"
          },

          {
            title: "设备编码",
            prop: "deviceCode",
            align: "center"
          },
          {
            title: "设备类型",
            prop: "deviceType",
            align: "center",
            render: (h, params) => {
              return h("span", [h("span", {}, params.row.deviceType == 0 ? "可配置设备" : "固化设备")])
            }
          },
          {
            title: "设备位置",
            width: "240px",
            prop: "deviceOfRegionSysName",
            align: "center"
          },
          {
            title: "设备描述",
            prop: "deviceDes",
            align: "center"
          },
          {
            title: "是否配置",
            prop: "messages",
            align: "center",
            render: (h, params) => {
              return h("div", [h("el-tag", {
                props: {
                  type: params.row.messages == "已配置" ? "success" : "danger",
                  size: "mini"
                }
              }, params.row.messages)])
            }
          },
          {
            title: "操作",
            width: "150",
            align: "center",
            render: (h, params) => {
              return h("div", [h("el-button", {
                props: {
                  type: "success",
                  size: "mini"
                },
                on: {
                  click: () => {
                    this.handleDetail(params.row)
                  }
                }
              }, "配置")])
            }
          }
        ],
        list: [
          {
            deviceName: "设备名称001",
            modelType: "模型类型001",
            deviceModel: "设备型号001",
            deviceId: "设备ID001",
            deviceAddress: "设备位置001",
            remark: "备注001"
          }
        ],
        page: {
          pageSize: 10,
          pageIndex: 1
        },
        tableLoading: false,
        dialogVisible: false,
        devCode: ""
      }
    },
    // 生命周期 - 创建完成（访问当前this实例）
    created() {

    },
    // 生命周期 - 挂载完成（访问DOM元素）
    mounted() {
      this.getTableList()
    },
    // 存放方法事件 - 会在数据变化时被调用
    methods: {
      pagination(pageItem) {
        // pageItem.page, pageItem.limit
        this.page.pageIndex = pageItem.page
        this.page.pageSize = pageItem.limit
        this.getTableList()
      },
      handleDetail(row) {
        this.devCode = row.deviceCode
        this.dialogVisible = true
      },
      async getTableList() {
        const { deviceName, deviceCode } = this.searchModel
        const { status, success, object, message } = await queryDevicePage({ ...this.page, deviceName, deviceCode })
        if (status == 200) {
          this.tableLoading = false
          this.list = object.data
          this.count = object.count
        }
      },
      searchClick() {
        this.getTableList()
      },
      refresh() {
        this.searchModel = {
          deviceName: "",
          deviceCode: ""
        }
        this.getTableList()
      },
      closeDialog() {
        this.dialogVisible = false
        this.getTableList()
      }
    }
  }
</script>
<style scoped lang="scss">
  .pagination {
    display: flex;
    justify-content: flex-end;
  }

  .title-container {
    display: flex;
    justify-content: flex-end;
    height: 60px;

    .search-content {
      display: flex;
    }

    .addAccount {
      margin: 10px 20px;
    }
  }
</style>
